import React, {PureComponent,  Fragment} from 'react'
import { TitleWrapper, TitleContent, TitleCode } from './style'
import { actionCreater } from './store'
import { connect } from 'react-redux'
import { Icon } from 'antd'
class Qrcode extends PureComponent{
   render(){
       const { handleMouseIn, handleMouseOut, mouseIn }= this.props;
    
       return(
         <Fragment>
                {
                  mouseIn ? 
                  <TitleCode>
                  <img alt = '' className = 'code-img' src = '//cdn2.jianshu.io/assets/web/download-index-side-qrcode-cb13fc9106a478795f8d10f9f632fccf.png' />
                  </TitleCode>
                : null
                }
               <TitleWrapper  onMouseEnter= { handleMouseIn } onMouseLeave= { handleMouseOut } >
                 <img alt = '' className = 'title-img' src = '//cdn2.jianshu.io/assets/web/download-index-side-qrcode-cb13fc9106a478795f8d10f9f632fccf.png' />
                    <TitleContent>
                       <div className = 'title'>
                         下载简书手机App
                         <Icon type="right" theme="outlined" style = {{fontSize: '13px'}} />
                       </div>
                       <div className = 'desc'>
                        随时随地发现和创作内容
                       </div>
                    </TitleContent> 
                </TitleWrapper>
         </Fragment>
       )
   }
}
const mapState = (state) => {
  return{
    mouseIn: state.getIn(['qrcode', 'mouseIn'])
  }
}
const mapDispatch = (dispatch) => {
  return{
    handleMouseIn(){
      dispatch( actionCreater.changeMouseIn() )
    },
    handleMouseOut(){
      dispatch( actionCreater.changeMouseOut() )
  }
}
}
export default connect( mapState, mapDispatch)(Qrcode)